<template>

    <a-form ref="formRef" name="custom-validation" :model="formState" v-bind="layout" @finish="handleFinish">
        <a-row>
            <a-col :span="4">
                <a-form-item has-feedback label="项目名称" name="project_name">
                    <a-input allowClear v-model:value="formState.project_name" />
                </a-form-item>
            </a-col>

            <a-col :span="4">
                <a-form-item has-feedback label="项目分类" name="category_id">
                    <a-select allowClear v-model:value="formState.category_id">
                        <a-select-option :value="item.category_id" v-for="item in projectCategory"
                            :key="item.category_id">{{
                                item.category_name
                            }}
                        </a-select-option>
                    </a-select>
                </a-form-item>
            </a-col>

            <a-col :span="4">
                <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
                    <a-button type="primary" html-type="submit">查询</a-button>
                    <!-- <a-button type="primary" style="margin-left: 10px" @click="handleAdd">新增</a-button> -->
                </a-form-item>
            </a-col>
        </a-row>

        <a-row>
            <a-col :span="24">
                <a-flex justify="flex-end">
                    <a-button type="primary" style="margin-left: 10px" @click="handleAdd">新增</a-button>
                </a-flex>
            </a-col>
        </a-row>
    </a-form>


    <a-row>
        <a-col :span="24">
            <a-table size="small" style="width: 100%;" :columns="columns" :data-source="data">

                <template #bodyCell="{ column, text, record }">
                    <template v-if="column.dataIndex === 'name'">
                        <a>{{ text }}</a>
                    </template>
                    <template v-if="column.dataIndex === 'action'">
                        <a type="primary" @click="handleEdit(record)">编辑</a>
                        <a type="danger" @click="deleteProject(record)">删除</a>
                    </template>
                </template>
            </a-table>
        </a-col>

    </a-row>

    <a-row>
        <a-drawer v-model:open="open" class="custom-class" root-class-name="root-class-name" style="color: red"
            :title="addFormState.project_id ? '编辑' : '新增'" placement="right">

            <a-form :rules="addRulesForm" ref="addFormRef" name="custom-validation" :model="addFormState"
                v-bind="layout" @finish="addFormState.project_id ? handleEditFinish($event) : handleAddFinish($event)">

                <a-form-item has-feedback label="项目名称" name="project_name">
                    <a-input v-model:value="addFormState.project_name" />
                </a-form-item>

                <a-form-item has-feedback label="项目分类" name="category_id">
                    <a-select v-model:value="addFormState.category_id">
                        <a-select-option :value="item.category_id" v-for="item in projectCategory"
                            :key="item.category_id">{{
                                item.category_name
                            }}
                        </a-select-option>
                    </a-select>
                </a-form-item>

                <a-form-item has-feedback label="项目描述" name="description">
                    <a-textarea v-model:value="addFormState.description" />
                </a-form-item>

                <a-form-item has-feedback label="项目定价" name="price">
                    <a-input-number style="width: 100%" v-model:value="addFormState.price" :min="0" :max="1000000000" />
                </a-form-item>
                <a-form-item has-feedback label="项目耗材" name="materials">
                    <a-input v-model:value="addFormState.materials" />
                </a-form-item>


                <a-form-item has-feedback>
                    <a-col :span="24">
                        <a-flex justify="flex-end">
                            <a-button type="primary" style="margin-left: 10px" html-type="submit">保存</a-button>
                        </a-flex>
                    </a-col>
                </a-form-item>
            </a-form>
        </a-drawer>
    </a-row>
</template>
<script setup>
import { project as service } from '@/api/modulesApi/project'
import { message } from 'ant-design-vue'
import { reactive, ref } from 'vue';


const projectCategory = ref([]);
const getProjectCategory = async () => {
    const res = await service.getProjectCategory()
    projectCategory.value = res.data
}
getProjectCategory()


const columns = [
    {
        title: '项目编号',
        dataIndex: 'project_id',
        key: 'project_id',
    },
    {
        title: '项目名称',
        dataIndex: 'project_name',
        key: 'project_name',
    },

    {
        title: '项目分类',
        dataIndex: 'category_id',
        key: 'category_id',
        customRender: ({ text }) => {
            return projectCategory.value.find(item => item.category_id === text)?.category_name
        }
    },
    {
        title: '项目描述',
        dataIndex: 'description',
        key: 'description',
    },
    {
        title: '项目定价',
        dataIndex: 'price',
        key: 'price',
    },
    {
        title: '项目耗材',
        dataIndex: 'materials',
        key: 'materials',
    },
    {
        title: '创建时间',
        dataIndex: 'create_time',
        key: 'create_time',
    },
    {
        title: '操作',
        dataIndex: 'action',
        key: 'action',
        scopedSlots: { customRender: 'action' }
    }
];

const data = ref([]);

const formRef = ref();
const formState = reactive({
    project_name: '',
    category_id: '',
});

const open = ref(false);

const addFormState = reactive({
    project_name: '',
    category_id: '',
    description: '',
    price: '',
    materials: '',
});
const addFormRef = ref();

const addRulesForm = {
    project_name: [{ required: true, message: '请输入项目名称' }],
    category_id: [{ required: true, message: '请选择项目分类' }],
    description: [{ required: true, message: '请输入项目描述' }],
    price: [{ required: true, message: '请输入项目定价' }],
};

const handleAdd = () => {
    addFormState.project_id = '';
    addFormState.project_name = '';
    addFormState.category_id = '';
    addFormState.description = '';
    addFormState.price = '';
    addFormState.materials = '';
    open.value = true;
};

const handleEdit = (record) => {
    addFormState.project_id = record.project_id;
    addFormState.project_name = record.project_name;
    addFormState.category_id = record.category_id;
    addFormState.description = record.description;
    addFormState.price = record.price;
    addFormState.materials = record.materials;
    open.value = true;
}

const handleAddFinish = async (values) => {
    let res = await service.addProject(addFormState)
    message.success('保存成功')
    getProject()
    addFormRef.value.resetFields();
    open.value = false;
};

const handleEditFinish = async (values) => {
    let res = await service.updateProject(addFormState)
    message.success('保存成功')
    getProject()
    addFormRef.value.resetFields();
    open.value = false;
}

const layout = {
    labelCol: { span: 7 },
    wrapperCol: { span: 14 },
};

const handleFinish = (values) => {
    getProject()
};

const getProject = async () => {
    const res = await service.getProject(formState)
    data.value = res.data
}


getProject()

const deleteProject = async (record) => {
    let res = await service.deleteProject({ project_id: record.project_id })
    message.success('删除成功')
    getProject()
}

</script>